import React, { useState } from 'react';
import { Card } from '../../types';
import { format } from 'date-fns';
import styles from './Notebook.module.css';

interface CardListProps {
  cards: Card[];
  selectedCardId: string | undefined;
  onSelectCard: (card: Card) => void;
  onDeleteCard?: (cardId: string) => void;
}

const CardList: React.FC<CardListProps> = ({ cards, selectedCardId, onSelectCard, onDeleteCard }) => {
  const [cardToDelete, setCardToDelete] = useState<string | null>(null);
  
  // 删除按钮的内联样式
  const deleteButtonStyle = {
    background: 'none',
    border: 'none',
    color: '#f43f5e',
    cursor: 'pointer',
    padding: '2px 6px',
    borderRadius: '4px',
    fontSize: '12px',
    display: 'flex',
    alignItems: 'center'
  };
  
  // 确认删除按钮样式
  const confirmDeleteStyle = {
    ...deleteButtonStyle,
    background: '#fee2e2',
    padding: '2px 8px',
    marginLeft: '4px'
  };
  
  // 取消删除按钮样式
  const cancelDeleteStyle = {
    ...deleteButtonStyle,
    color: '#6b7280',
    background: '#f3f4f6',
    padding: '2px 8px'
  };

  return (
    <div className={styles.cardsList}>
      {cards.map((card) => (
        <div
          key={card.id}
          className={`${styles.cardItem} ${card.id === selectedCardId ? styles.selected : ''}`}
          onClick={() => onSelectCard(card)}
        >
          <h3>{card.title}</h3>
          <p>{card.content.slice(0, 50)}{card.content.length > 50 ? '...' : ''}</p>
          <div className={styles.cardMeta}>
            <span>
              <i className="bi bi-clock"></i>{' '}
              {format(card.created_at, 'MM-dd HH:mm')}
            </span>
            <span>
              <i className="bi bi-calendar-check"></i>{' '}
              {format(card.next_review, 'MM-dd')}
            </span>
            {onDeleteCard && cardToDelete !== card.id && (
              <button
                style={deleteButtonStyle}
                onClick={(e) => {
                  e.stopPropagation();
                  setCardToDelete(card.id);
                }}
              >
                <i className="bi bi-trash"></i>
              </button>
            )}
            {onDeleteCard && cardToDelete === card.id && (
              <div onClick={(e) => e.stopPropagation()} style={{ display: 'flex' }}>
                <button
                  style={confirmDeleteStyle}
                  onClick={(e) => {
                    e.stopPropagation();
                    onDeleteCard(card.id);
                    setCardToDelete(null);
                  }}
                >
                  确认
                </button>
                <button
                  style={cancelDeleteStyle}
                  onClick={(e) => {
                    e.stopPropagation();
                    setCardToDelete(null);
                  }}
                >
                  取消
                </button>
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
};

export default CardList; 